<template>
  <div class="blocks">
    <div v-for="(n, i) in blocks" :key="i">
      <div v-if="n.type == 'text'" class="mgb-l"><text>{{n.value}}</text></div>
      <div v-if="n.type == 'audio'"  class="mgb-l" style="position: relative;">
        <span style="position: absolute;left: -5px;top: -8px;color: #00ADCE;font-size: 11px;">{{n.idx}}</span>
        <audio-player :path="n.key" :size="n.size" :duration="n.meta.duration"></audio-player>
      </div>
      <div v-if="n.type == 'image'"  class="mgb-l">
        <image-player :path="n.key"></image-player>
      </div>
      <div v-if="n.type == 'video'"  class="mgb-l">
        <video-player v-if="!isModel" :path="n.key" :cover-pic-path="n.meta.coverPicKey"></video-player>
      </div>
    </div>
  </div>
</template>

<script>
import AudioPlayer from '@/components/audio-player'
import VideoPlayer from '@/components/video-player'
import ImagePlayer from '@/components/image-player'
import { mapGetters, mapActions } from 'vuex'

export default {
  props: {
    value: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      audioIdx: 1
    }
  },
  components: {
    AudioPlayer,
    VideoPlayer,
    ImagePlayer
  },
  computed: {
    ...mapGetters([
      'isModel'
    ]),
    blocks () {
      let audioIdx = 1
      let t = []
      this.value.forEach(n => {
        if (n.type === 'audio') {
          n.idx = audioIdx++
        }
        t.push(n)
      })
      return t
    }
  },
  methods: {
    onAudioPlay (key) {
      this.ex = key
    },
  }
}
</script>

<style scoped lang="less">
@import '../assets/less/var.less';
</style>
